<template>
  <div class="production-plan">
    <el-button type="success" @click="addjihau" class="save-button">保存主表单和明细</el-button>
    <h3 class="title">异常处理</h3>

    <!-- 基本信息 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="120px" class="form-container">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="异常编号" style="margin-bottom: 20px;">
            <el-input v-model="formData.exceptionNumber" placeholder="请输入设备名称"  disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发生时间" prop="occurrenceTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.occurrenceTime"
              type="date"
              required
              placeholder="请选择发生时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备名称" style="margin-bottom: 20px;">
            <el-input v-model="formData.equipment_name" placeholder="请输入设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" style="margin-bottom: 20px;">
            <el-input v-model="formData.equipment_number" placeholder="请输入前置工序"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="温度" style="margin-bottom: 20px;">
          <el-input-number v-model="formData.temperature" placeholder="请输入温度" :min="0" :step="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="压力" style="margin-bottom: 20px;">
          <el-input-number v-model="formData.pressure" placeholder="请输入压力" :min="0" :step="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="过滤速度" style="margin-bottom: 20px;">
          <el-input-number v-model="formData.filtrationSpeed" placeholder="请输入过滤速度" :min="0" :step="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="洗糟水用量" style="margin-bottom: 20px;">
          <el-input-number v-model="formData.waterUsage" placeholder="请输入洗糟水用量" :min="0" :step="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="洗糟次数" style="margin-bottom: 20px;">
          <el-input-number v-model="formData.frequency" placeholder="请输入洗糟次数" :min="0" :step="1" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
          <el-form-item label="工艺时间" prop="ProcessTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.processTime"
              type="date"
              required
              placeholder="请选择工艺时间"
              style="width: 100%;"

            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="麦芽汁的澄清度" style="margin-bottom: 20px;">
            <el-input v-model="formData.clarityWort" placeholder="请输入麦芽汁的澄清度"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="热凝固物去除效果" style="margin-bottom: 20px;">
            <el-input v-model="formData.thermalCondensates" placeholder="请输入热凝固物去除效果"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="冷凝固物去除效果" style="margin-bottom: 20px;">
            <el-input v-model="formData.condensation" placeholder="请输入冷凝固物去除效果"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发酵液的浊度" style="margin-bottom: 20px;">
            <el-input v-model="formData.fermentTurbidity" placeholder="请输入发酵液的浊度"  />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="啤酒的微生物指标" style="margin-bottom: 20px;">
            <el-input v-model="formData.Microbiologicalindicators" placeholder="请输入啤酒的微生物指标"  />
          </el-form-item>
        </el-col>
      <el-col :span="8">
          <el-form-item label="原因判断" style="margin-bottom: 20px;">
            <el-input v-model="formData.cause" placeholder="请输入原因判断" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="过滤时间" prop="filterTime" style="margin-bottom: 20px;">
            <el-date-picker
              v-model="formData.filterTime"
              type="date"
              required
              placeholder="请选择过滤时间"
              style="width: 100%;"
              
            ></el-date-picker>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" style="margin-bottom: 20px;">
              <el-input v-model="formData.state" placeholder="请输入状态"  />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应急措施" style="margin-bottom: 20px;">
              <el-input v-model="formData.emergencyMeasures" placeholder="请输入应急措施" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="处理人员" style="margin-bottom: 20px;">
              <el-input v-model="formData.handlers" placeholder="请输入处理人员" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="使用工具 / 备件" style="margin-bottom: 20px;">
              <el-input v-model="formData.spareParts" placeholder="请输入使用工具 / 备件"  type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

  <script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import axios from 'axios';
  import { th } from 'element-plus/es/locales.mjs';
  
  const formRef = ref(null);
  const currentUser = ref("admin");
  const router = useRouter();
  const route = useRoute();
  //流量传感器
const workOrderTypeOptions5 = ref([
  { value: '稳定流量', label: '稳定流量' },
  { value: '动态流量', label: '动态流量' },
  { value: '流量异常报警', label: '流量异常报警' },
  { value: '设备故障报警', label: '设备故障报警' },
  { value: '休眠状态', label: '休眠状态' },
]);
//微生物检测
const workOrderTypeOptions6 = ref([
  { value: '通过', label: '通过' },
  { value: '未通过', label: '未通过' },
  { value: '待审核', label: '待审核' },
  { value: '审核中', label: '审核中' },
]);
  // 主表单数据
  const formData = reactive({
    "exceptionNumber": "",
    "occurrenceTime": "",
    "equipment_name": "",
    "equipment_number": "",
    "temperature": '',
    "pressure": '',
    "filtrationSpeed": '',
    "waterUsage":'',
    "frequency": '',
    "processTime": "",
    "clarityWort": "",
    "thermalCondensates": "",
    "condensation": "",
    "fermentTurbidity": "",
    "microbiologicalindicators": "",
    "cause": "",
    "filterTime": "",
    "state": "",
    "emergencyMeasures": "",
    "handlers": "",
    "spareParts": "",
    "isDel": true
  });
  
  const getProductionById = (id) => {
console.log('查看异常处理反填数据:', id);
axios.get('https://localhost:7238/api/Abnormal/FTAbnormal', {
    params:{
      id: route.query.id
    }
  })
  .then(res=>{
    formData.id = res.data.data[0].id;
    formData.exceptionNumber = res.data.data[0].exceptionNumber;
    formData.occurrenceTime = res.data.data[0].occurrenceTime;
    formData.equipment_number = res.data.data[0].equipment_number;
    formData.temperature = res.data.data[0].temperature;
    formData.pressure = res.data.data[0].pressure;
    formData.filtrationSpeed = res.data.data[0].filtrationSpeed;
    formData.waterUsage = res.data.data[0].waterUsage;
    formData.frequency = res.data.data[0].frequency;
    formData.processTime = res.data.data[0].processTime;
    formData.clarityWort = res.data.data[0].clarityWort;
    formData.thermalCondensates = res.data.data[0].thermalCondensates;
    formData.condensation = res.data.data[0].condensation;
    formData.fermentTurbidity = res.data.data[0].fermentTurbidity;
    formData.microbiologicalindicators = res.data.data[0].microbiologicalindicators;
    formData.cause = res.data.data[0].cause;
    formData.filterTime = res.data.data[0].filterTime;
    formData.state = res.data.data[0].state;
    formData.emergencyMeasures = res.data.data[0].emergencyMeasures; 
    formData.handlers = res.data.data[0].handlers;
    formData.spareParts = res.data.data[0].spareParts;
    formData.modelValue = res.data.data[0];
    console.log('异常处理反填数据:', res.data);
  })
};



// // 保存主表单
 const addjihau = () => {
    axios.post('https://localhost:7229/api/Abnormal/UpdateAbnormal', formData)
    .then(response => {
     if (response.data.code === 200) {
       ElMessage.success('异常处理修改成功');
       console.log(response.data.data);
       router.push("/GetAbnormal");
    } else {
       ElMessage.error(`异常处理修改失败：${response.data.message}`);
    }
    })
};

onMounted(()=>{
  getProductionById();
})
  
    </script>
    
    <style scoped>
    .production-plan {
      padding: 30px;
      background-color: #f0f2f5;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      font-family: 'Arial', sans-serif;
    }
    
    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
      font-size: 24px;
      font-weight: 600;
    }
    
    .save-button {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 24px;
      font-size: 16px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .form-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
    
    .el-form-item__label {
      color: #34495e;
      font-size: 16px;
      font-weight: 500;
    }
    
    .el-input,
    .el-input-number,
    .el-date-picker {
      border-radius: 6px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 14px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    
    .el-input:focus,
    .el-input-number:focus,
    .el-date-picker:focus {
      border-color: #42b983;
      outline: none;
      box-shadow: 0 0 5px rgba(66, 185, 131, 0.2);
    }
    </style>